<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
    <head>
		<%@ include file="/WEB-INF/views/include/common.jsp" %>
		<meta name="AUTHOR" content="QroTech Inc." />
		<title>큐로넷::위치관제시스템</title>
		
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
		<link rel="stylesheet" href="${cssUrl}/header-1.css" type="text/css" />
		<link rel="stylesheet" href="${cssUrl}/fancy_table.css" type="text/css" />
		<link rel="stylesheet" href="${cssUrl}/menu.css" type="text/css" />
		<link rel="stylesheet" href="${cssUrl}/table.css" type="text/css" />
		<link rel="stylesheet" href="${cssUrl}/button.css" type="text/css" />
		<link rel="stylesheet" href="${cssUrl}/secondmenu.css" type="text/css" />
		<link rel="stylesheet" href="${cssUrl}/Qronet_display_sub4.css" type="text/css" />
		<link rel="stylesheet" href="${cssUrl}/R-200.css" type="text/css" />
		<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
		<script src="${jsUrl}/pagenation.js"></script>
	</head>
    <body>
    	<div class="mainContent">	
    		<div class="R200">
    			<div class="buttonWrap"><a class="button1">공단보고용파일저장</a><a class="button1" onClick="getExcelRunData()">엑셀저장</a></div>
				<div  class="scrollWidth" style="clear:both;">	
					<div class="chartWidth">
						<div class="chart_head" >
							<table  valign="top" cellpadding="0" cellspacing="0"> 
								<tr valign="top" >
									<th width="50px">번호</th>
									<th width="50px">시동</th>
									<th width="80px">수신시각</th>
									<th width="300px">위치</th>
									<th width="60px">속도</th>
									<th width="60px">RPM</th>
									<th width="60px">방향</th>
									<th width="60px">제동</th>
									<th width="80px">거리</th>
									<th width="90px">누적거리</th>
									<th width="50px">CDMA</th>
									<th width="50px">GPS</th>
									<th width="60px">전압</th>
									<th width="*">이벤트메세지</th>
									
								</tr>	
							</table>
						</div><!--chart_head end-->
						<div id="scrollHeight" class="chart_body">
							<table cellpadding="0" cellspacing="0" id="pagingTbl"> 
								<tr>
									<td id="seq" width="50px" ></td>
									<td id="startUp" width="50px"></td>
									<td id="detectTime" width="80px"></td>
									<td id="address" width="300px"></td>
									<td id="speed" width="60px"></td>									
									<td id="rpm" width="60px"></td>
									<td id="cardinalStr" width="60px"></td>
									<td id="breaked" width="60px"></td>
									<td id="dayDistance" width="80px"></td>
									<td id="totalDistance" width="90px"></td>
									<td id="cdmastate" width="50px"></td>
									<td id="gpsstate" width="50px"></td>
									<td id="voltage" width="60px"></td>
									<td width="*"></td>
								</tr>
								
							</table>	
						</div><!-- chart_body end -->
					</div><!-- first whole chart end-->
				</div>	<!-- scroll horizontal end-->
				<div class="pagenation" id="pagenation"><a><img src="${imgUrl}/page_left_arrow.png"></a>
    					<a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a>
    					<a>7</a><a>8</a><a>9</a><a>10</a>
    					<a><img src="${imgUrl}/page_right_arrow.png"></a> 
    				</div>
    		</div>
			
		</div> <!-- mainContent end -->
	<script language="javascript">
		var _this = this;
		$(document).ready(function(){
			init();
		});
		
		function init() {
			var periodIndex = $('#periodIndex', parent.document.paramForm).val();
			var curDate = $('#periodCurDate', parent.document.paramForm).val();
			var selectedMonth = $('#periodSelectedMonth', parent.document.paramForm).val();
			var groupIndex = $('#groupIndex', parent.document.paramForm).val();
			var groupCarCode = $('#groupCarCode', parent.document.paramForm).val();
			var groupCarGroupCode = $('#groupCarGroupCode', parent.document.paramForm).val();
			
			 
			markerSetting.paging.periodIndex = periodIndex;
			markerSetting.paging.date = curDate;
			markerSetting.paging.groupIndex = groupIndex;
			markerSetting.paging.selectedMonth = selectedMonth;
			markerSetting.paging.carCode = groupCarCode;
			markerSetting.paging.carGroupCode = groupCarGroupCode;
			
			_this.pagingTbl = tableSync('pagingTbl');
			
			getRunData();
		}
		var markerSetting = {
				paging:{}
		}
		
		function getRunData(){
			
			var url='getRunData.json';
			
			var param=markerSetting.paging;
			
			AjaxPost(url, param, function(data){
				
				 $.each(data.data,function(index, value){
					value.detectTimeOri = value.detectTime; 
					value.detectTime = formatter.timeFormatHHMMSS2nd(value.detectTime);
					value.startUp = startUp=='y'?'On':'Off';
					value.speed = value.speed +'km/h';
					value.dayDistance = formatter.numberComma((value.dayDistance/10)+'') +'km';
					value.totalDistance = formatter.numberComma((value.totalDistance/10)+'') +'km';
					
					value.cdmastate = value.cdmastate==0?'이상':'정상';
					value.gpsstate = value.gpsstate==0?'이상':'정상';
					value.voltage = isNullNaN(value.voltage)?'-':(value.voltage/10)+'V';
					//logs('typeof value.temperature = '+typeof value.temperature);
					//logs(value.temperature);
					value.temperature = isNullNaN(value.temperature)?'-':value.temperature+'C';
					value.humidity = isNullNaN(value.humidity)?'-':value.humidity+'%';
					
				});
				
				$('#pagingTbl').find('tr td#seq').filter(function(ind){
					$(this).parent().find('td').css('background-color', '');
				});
				
				_this.pagingTbl.tableAutoSync(data.data);
				
				markerSetting.paging.page = data.nowPage;				
				markerSetting.paging.nowSeq = 1;
				markerSetting.paging.totalPage= data.totalPage.totalPage;
				makingPaging();
			});
		}
		
		function makingPaging(){
			$('#pagenation').html("");
			var totalPage = markerSetting.paging.totalPage;
			var nowPage = markerSetting.paging.page;
			var html='';
			var className = '';
			var setFunctionName='';
			var index=(nowPage-4);
			var indexCount=0;
			var pageCnt = 0;
			if(index>1){
				html+='<a onclick="changePaging('+index+',\'before\''+')"><img src="${imgUrl}/page_left_arrow.png"></a>';
			}
//	 		//logs('totalPage/20 = '+totalPage/20);
			pageCnt = totalPage/20;
			if (totalPage%20 > 0) {
				pageCnt += 1;
			}
			for(;index<=pageCnt;index++){
				if((index)==nowPage){
					className = ' class="current_page"';
					setFunctionName='';
				}else{
					className = 'style="cursor:pointer;"';
					setFunctionName=' onclick="changePaging('+index+')"';
				}
				
				if(index>0){
						
					html+='<a '+className+' '+setFunctionName+'>'+index+'</a>';	
					
					indexCount++;
				}
				if(indexCount>9){
					html+='<a onclick="changePaging('+index+',\'after\''+')"><img src="${imgUrl}/page_right_arrow.png"></a>';
					break;
				}
				
			}
			$('#pagenation').html(html);
			try{
				if(markerSetting.paging.makeNewPage > 0){
					var index = markerSetting.paging.makeNewPage;
					markerSetting.paging.makeNewPage=0;
				}	
			}catch(e){}
			
		}
		function changePaging(index, option){
			logs('markerSetting.paging.totalPage = '+markerSetting.paging.totalPage);
			if(option==null){
				logs(', index = '+index);
				
				markerSetting.paging.page=index;
				markerSetting.paging.start=0;
				markerSetting.paging.end=0;
				getRunData();
			}else{
				if(option=='before'){
					var next = index-6;
					while(next<=0){
						next++;
					}
					logs('next = '+next+', index = '+index);
					markerSetting.paging.page=next;
					markerSetting.paging.start=0;
					markerSetting.paging.end=0;
					getRunData();
				}else if(option=='after'){					
					var next = index+5;					
					while(next>=(markerSetting.paging.totalPage/20)+1){
						next--;
					}
					
					logs('next = '+next+', index = '+index);
					markerSetting.paging.page=next;
					markerSetting.paging.start=0;
					markerSetting.paging.end=0;
					getRunData();
				}
			}
		}
		function isNullNaN(str){
			
			if(str == null) return true;
			if(isNaN(str)) return true;
		         return false;
		}
		
		function getExcelRunData(){
			var param = "periodIndex="+markerSetting.paging.periodIndex;
			param += "&date="+markerSetting.paging.date;
			param += "&groupIndex="+markerSetting.paging.groupIndex;			
			param += "&selectedMonth="+ markerSetting.paging.selectedMonth;
			param += "&carCode="+markerSetting.paging.carCode;
			param += "&carGroupCode="+markerSetting.paging.carGroupCode;
						
			location.href = "/report/getExcelRunData?"+param;

		}
		</script>
	</body>
</html>
